{% stylesheet %}
  .block_image {
    position: relative;
    max-width: var(--general_layout_width);
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  .block_image .container_wrapper {
    padding: 80px;
  }

  .block_image-fill .container_wrapper {
    padding: 0;
  }

  .block_image-fill {
    width: 100% !important;
    max-width: 100%;
  }

  .block_image a {
    width: 100%;
  }
  .block_image .content-btn {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 16px;
    padding: 10px 20px;
    min-height: 48px;
    text-align: center;
    cursor: pointer;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--button_border_radius);
    transition: all 0.3s;
  }
  .block_image .content-btn:hover {
    opacity: .9;
  }
  .image-size-big img {
    height: 800px;
    width: 100%;
    object-fit: cover;
  }

  .image-size-middle img {
    height: 560px;
    width: 100%;
    object-fit: cover;
  }

  .image-size-small img {
    height: 300px;
    width: 100%;
    object-fit: cover;
  }

  .image-size-middle .content-describe {
    margin-top: 20px !important;
  }

  .image-size-middle .content-btn {
    margin-top: 30px !important;
  }

  .image-size-small .content-describe {
    margin-top: 10px !important;
  }

  .image-size-small .content-btn {
    margin-top: 20px !important;
  }

  .image-size-auto img {
    height: auto;
    width: 100%;
    object-fit: cover;
  }

  .block_image .block_image-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }

  .block_image-fill .block_image-content {
    max-width: 1200px !important;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
  }

  .block_image .block_image-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 110;
    box-sizing: border-box;
  }

  .block_image .content-position-center {
    align-items: center;
    text-align: center;
  }

  .block_image .content-position-center .content-describe {
    max-width: 800px;
  }

  .block_image .content-position-left {
    align-items: flex-start;
    text-align: left;
  }

  .block_image .content-position-left .content-describe {
    max-width: 380px;
  }

  .block_image .content-position-right {
    align-items: flex-end;
    text-align: right;
  }

  .block_image .content-align-right .content-describe {
    max-width: 380px;
  }

  .block_image .content-title {
    font-weight: 300;
    color: #ffffff;
    color: var(--title_color);
    font-size: var(--title_font_size);
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
  }

  .block_image .content-describe {
    margin-top: 30px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
  }

  .block_image .content-align-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .block_image .content-align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .block_image .content-align-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .block_image .block-image-mobile {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .block_image .slide-item .slide-item-des {
      font-size: 14px;
    }
    .block_image.image-size-big img {
      height: 600px;
    }
    .block_image.image-size-middle img {
      height: 400px;
    }
    .block_image.image-size-samll img {
      height: 320px;
    }
    .block_image .block_image-content {
      padding: 0 15px;
    }
  }

  @media screen and (max-width: 767px) {
    .block_slides .block-image-mobile {
      display: block;
    }
    .block_slides .block-image-pc {
      display: none;
    }
    .block_image.image-size-big img {
      height: 100vh;
    }
    .block_image.image-size-middle img {
      height: 70vh;
    }
    .block_image.image-size-samll img {
      height: 50vh;
    }
    .block_image .block-image-mobile {
      display: block;
    }
    .block_image .block-image-pc {
      display: none;
    }
  }

  @media screen and (min-width: 767px) and(max-width: 1200px) {
    .block_image-fill .block_image-content {
      padding: 0 30px;
    }
  }
{% endstylesheet %}


<div class="block_image {% if section.settings.is_full %}block_image-fill{% endif %} image-size-{{ section.settings.height }}">
  <a href="{{section.settings.slide_path | setUrlDataFrom:data_from}}">

    {% if section.settings.web_image.src != "" %}
      <img data-crop-type="height" data-src="{{ section.settings.web_image.src }}" src="{{ 'banner_loading.png' | public_asset_abs_url  }}" alt="{{ section.settings.web_image.alt }}" class="block-image-pc">
    {% else %}
      <img data-crop-type="height" src="{{ 'banner@2x.png' | public_asset_abs_url  }}" alt="" class="block-image-pc">
    {% endif %}

    {%- if section.settings.mobile_image.src != "" or section.settings.web_image.src -%}
      <img data-crop-type="height" data-src="{{ section.settings.mobile_image.src | default:section.settings.web_image.src }}" src="{{ 'banner_loading.png' | public_asset_abs_url  }}" alt="{{ section.settings.mobile_image.alt }}" class="block-image-mobile">
    {%- else -%}
      <img data-crop-type="height" src="{{ 'banner@2x.png' | public_asset_abs_url }}" alt="" class="block-image-mobile">
    {%- endif -%}

    <div class="block_image-mask" style="background-color:{{ section.settings.mask_color }};opacity: {{ section.settings.mask_transparent | divided_by : 100  }};"></div>

    <div class="slide-content-{{ block_id | default : section.block_id }} block_image-content content-size-{{ section.settings.text_size }}  content-position-{{ section.settings.text_position }} {% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
      <div class="content-align-{{ section.settings.text_position }}">
        <h2 class="content-title" style="color:{{ section.settings.title_color }}">{{ section.settings.title }}</h2>
        <div class="content-describe" style="color:{{ section.settings.content_color }}">{{ section.settings.content }}</div>
        {% if section.settings.button_text != '' %}
          <span class="content-btn" style="--btn-bg:{{ section.settings.button_background_color }};--btn-color:{{ section.settings.button_font_color  }}">{{ section.settings.button_text }}</span>
        {% endif %}
      </div>
    </div>
  </a>

</div>


{% schema %}
{
	"tag": "section",
	"class": "block_image",
	"is_global": false,
	"name": {
		"zh_CN": "单图",
		"en_US": "Single image"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc图片",
				"en_US": "PC image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
				"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
			},
			"id": "web_image"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端图片",
				"en_US": "Mobile image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议1242*2000px",
				"en_US": "Size suggested 1242*2000px"
			},
			"id": "mobile_image"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "跳转链接",
				"en_US": "Jump links"
			},
			"id": "slide_path"
		},
		{
			"type": "card_select",
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "big"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "middle"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "small"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			],
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			},
			"default": "middle"
		},
		{
			"type": "card_switch",
			"id": "is_full",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"default": true
		},
		{
			"type": "card_slider",
			"id": "mask_transparent",
			"max": "100",
			"min": 0,
			"label": {
				"zh_CN": "蒙层不透明度",
				"en_US": "Mask opacity"
			},
			"default": "0"
		},
		{
			"type": "card_color",
			"id": "mask_color",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			},
			"default": "#000"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"default": "Image with text overlay"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"default": "Image with text overlay",
			"id": "content"
		},
		{
			"type": "card_select",
			"id": "text_position",
			"label": {
				"zh_CN": "标题按钮位置",
				"en_US": "Title button location"
			},
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "right"
				}
			],
			"default": "left"
		},
		{
			"type": "card_color",
			"id": "title_color",
			"label": {
				"zh_CN": "标题颜色",
				"en_US": "Header color"
			},
			"default": "#fff"
		},
		{
			"type": "card_color",
			"id": "content_color",
			"label": {
				"zh_CN": "内容颜色",
				"en_US": "Content color"
			},
			"default": "#fff"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "按钮",
				"en_US": "Button"
			}
		},
		{
			"type": "card_input",
			"id": "button_text",
			"label": {
				"zh_CN": "按钮标题",
				"en_US": "Button title"
			},
			"default": "show now"
		},
		{
			"type": "card_color",
			"id": "button_background_color",
			"label": {
				"zh_CN": "按钮背景",
				"en_US": "Button background"
			},
			"default": "#000"
		},
		{
			"type": "card_color",
			"id": "button_font_color",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"default": "#fff"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"web_image": {
				"src": "",
				"alt": ""
			},
			"mobile_image": {
				"src": "",
				"alt": ""
			},
			"slide_path": {
				"type": "",
				"title": "",
				"url": ""
			},
			"height": "middle",
			"is_full": true,
			"mask_transparent": "0",
			"mask_color": "#000",
			"title": "Image with text overlay",
			"content": "Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story",
			"text_position": "center",
			"text_align": "center",
			"text_size": "big",
			"title_color": "#fff",
			"content_color": "#fff",
			"button_text": "SHOP ALL",
			"button_background_color": "#1D1F21",
			"button_font_color": "#fff"
		},
		"blocks": []
	},
	"icon": "icon-dantu"
}
{% endschema %}